<template>
	<div class="index">
		
		<header>
			<nav>

				<a v-if="buller"><img :src="'http://localhost:2200'+buller.avatar" /></a>
				<a v-if="!buller"><img src="/static/img/default_seller.png" /></a>
				<div>
					<a href="#/buller/search"><i class="fa fa-search"></i>搜索商品<img src="/static/img/1.png" /></a>
				</div>
				<span><a href="#/seller"><i class="fa fa-handshake-o"></i>商家合作</a></span>
			</nav>
		</header>
		
		<main>
			
			<swiper :auto='true' :loop='true' :threshold='50' :aspect-ratio='0.313'>
					<swiper-item>
						<div >
							<a href="#"><img style="width: 100%;" src="/static/img/swiper/1.jpg" alt="" /></a>
						</div>
						
						
					</swiper-item>
					<swiper-item>
						<div >
							<a href="#"><img style="width: 100%;" src="/static/img/swiper/2.jpg" alt="" /></a>
						</div>
						
						
					</swiper-item>
					<swiper-item>
						<div >
							<a href="#"><img style="width: 100%;" src="/static/img/swiper/3.jpg" alt="" /></a>
						</div>
						
						
					</swiper-item>
					<swiper-item>
						<div >
							<a href="#"><img style="width: 100%;" src="/static/img/swiper/4.jpg" alt="" /></a>
						</div>
						
						
					</swiper-item>
					<swiper-item>
						<div >
							<a href="#"><img style="width: 100%;" src="/static/img/swiper/5.jpg" alt="" /></a>
						</div>
						
						
					</swiper-item>
					<swiper-item>
						<div >
							<a href="#"><img style="width: 100%;" src="/static/img/swiper/6.jpg" alt="" /></a>
						</div>
						
						
					</swiper-item>
				</swiper>
			
			<div class="cate">
				<ul>
					<li>
						<a :href="'#/buller/result?category='+categorys[0][0]">
						<b style="background:darkgoldenrod;color: white"><i class="fa fa-braille"></i></b>	<span>{{categorys[0][1]}}</span></a>
					</li>
					<li>
						<a :href="'#/buller/result?category='+categorys[1][0]">
						<b style="background:cadetblue;color: white"><i class="fa fa-tablet"></i></b>	<span>{{categorys[1][1]}}</span></a>
					</li>
					<li>
						<a :href="'#/buller/result?category='+categorys[2][0]">
						<b style="background:chocolate;color: white"><i class="fa fa-desktop"></i></b>	<span>{{categorys[2][1]}}</span></a>
					</li>
					<li>
						<a :href="'#/buller/result?category='+categorys[3][0]">
						<b style="background:darkgreen;color: white"><i class="fa fa-female"></i></b>	<span>{{categorys[3][1]}}</span></a>
					</li>
					
					<li>
						<a :href="'#/buller/result?category='+categorys[4][0]">
						<b style="background:orangered;color: white"><i class="fa fa-archive"></i></b>	<span>{{categorys[4][1]}}</span></a>
					</li>
					<li>
						<a :href="'#/buller/result?category='+categorys[5][0]">
						<b style="background:darkmagenta;color: white"><i class="fa fa-window-maximize"></i></b>	<span>{{categorys[5][1]}}</span></a>
					</li>
					<li>
						<a :href="'#/buller/result?category='+categorys[6][0]">
						<b style="background:tan;color: white"><i class="fa fa-bath"></i></b>	<span>{{categorys[6][1]}}</span></a>
						
					</li>
					<li>
						<a :href="'#/buller/result?category='+categorys[7][0]">
						<b style="background:darkorange;color: white"><i class="fa fa-calendar-o"></i></b>	<span>{{categorys[7][1]}}</span></a>
					</li>
				</ul>
			</div>
			
			<div class="loading">
			<loading :show="show1" style='z-index: 99;' :text="text1"></loading>
		</div>
		<div class="good">
			<ul>
				<li v-for="(item,ins) in data">
					<a :href="'#/good/info/' + item._id+'?aa=1'">
						<img :src="'http://localhost:2200'+item.avatar[0]"/>
						<div>
						<p>{{item.name}}</p>
						<p>{{item.describe}}</p>
							<p><span>{{item.send | sendC}}</span></p>
						<p><span>¥</span>{{item.price}} <span>{{item.cellNum}}人已付款</span></p>
							<p><a :href="'#/buller/seller/'+item.king_id._id">{{item.king_id.nickName}} <span>进店 <i class="fa fa-chevron-right"></i></span></a></p>
						</div>
					</a>
				</li>
				
			</ul>
		</div>
			
		</main>
	</div>
</template>

<script>
	import $ from 'jquery';
	import { mapState, mapGetters } from 'vuex'
	import axios from 'axios'
	import { Loading } from 'vux'
	import { Swiper,SwiperItem} from 'vux'
	export default {
		data: function() {
			return {
				data: ['1'],
				xu: false,
				start: '',
				end: '',
				has: false,
				add: 0,
				page: 1,
				content: '',
				show1: true,
				text1: 'loading'

			}
		},
		filters: {
			cate: function(value) {
				var categorys = [
					['life', '生活用品'],
					['phone', '手机'],
					['computer', '电脑'],
					['dress', '服饰鞋帽'],
					['dresser', '美妆洗护'],

					['digital', '平板数码'],
					['household', '家电'],

					['wrap', '箱包礼品']
				];

				for(var i = 0; i < categorys.length; i++) {
					if(categorys[i][0] == value) {

						return categorys[i][1];
					}
				}

			},
			sendC(value){
			
				if(value == true){
					return '包邮'
				}else{
					return ''
				}
				
				
			}
		},
		computed: {
			...mapState([
				'seller', 'categorys', 'buller'
			])
		},
		components: {

			Loading,
			Swiper,
			SwiperItem

		},

		mounted() {
			var that = this;
			axios.get('/buller/goodsList').then(function(result) {

				that.data = result.data.data;
				

			}).catch(function(err) {
				console.log(err)
			})
			
			
			
			
			
			
			
			$(document).on('scroll', window, function() {
				var countH = $(document).outerHeight();
				var scrH = $(window).scrollTop();
				var winH = $(window).height();
				//				console.log(countH, winH, scrH);
				if(!that.has) {

					if((scrH + winH) > (countH - 3)) {
						that.page += 1;

						that.has = true;

						axios.get("/buller/goodsList?page=" + that.page).then(function(result) {
							
							if(result.data.data.length<=0){
								return;
							}
							
							$('.loading').fadeIn();
							setTimeout(function() {
								$('.loading').fadeOut(function() {
									result.data.data.forEach(function(item) {

										that.has = false;
										that.data.push(item);
									})
								});
							}, 500)

						}).catch(function(err) {
							console.log(err)
						})

					}
				}

			})
			
			
			
			
			
			
			
			
			
			
			
			
			
		}
	}
</script>

<style scoped>
	
	header {
		position: fixed;
		width: 100%;
		z-index: 100;
		top: 0;
		left: 0;
	}
	
	header nav a {
		font-size: 13px;
		color: #eee;
	}
	
	nav {
		
		width: 100%;
		overflow: hidden;
		line-height: 37px;
		padding: 5px 10px;
		background: linear-gradient(to right, #FF9202 0%, #FF5502 100%);
	}
	
	nav>a {
		float: left;
	}
	
	nav>div {
		float: left;
		margin-left: 5%;
		width: 55%;
		position: relative;
		left: 10px;
		border-bottom: solid 1px white;
		border-radius: 5%;
	}
	
	nav>div>a {
		display: block;
		width: 100%;
		font-size: 15px;
	}
	
	nav>a>img {
		width: 30px;
		height: 30px;
		position: relative;
		top: 4px;
		border-radius: 50%;
	}
	
	nav>div i {
		margin-left: 5px;
		margin-right: 5px;
	}
	
	nav>div img {
		position: absolute;
		top: 10px;
		right: 5px;
		width: 20px;
		height: 20px;
		border-radius: 50%;
	}
	
	nav>span {
		float: right;
	}
	
	main {
		
		padding-top: 54px;
		padding-bottom: 47px;
	}
	.loading {
		position: absolute;
		/*background: rgba(0,0,0,.5);*/
		width: 100%;
		height: 100%;
		z-index: 200;
		display: none;
	}
	.cate ul{
		overflow: hidden;
	}
	.cate li {
		float: left;
		width: 25%;
		padding: 5px;
	}
	.cate li a{
		display: block;
		width: 70%;
		margin: 0 auto;
		text-align: center;
		color: #777777;
		font-size: 12px;
	}
	.cate li a b{
		display: block;
		width: 40px;
		margin: 0 auto;
		background: #EEEEEE;
		border-radius:50% ;
		line-height: 40px;
		text-align: center;
	}
	.cate li a b i{
		position: relative;
		top: 3px;
		left: 1px;
		font-size: 18px;
	}
	.good ul{
		overflow: hidden;
		
	}
	.good ul li{
		width: 100%;
		height: 180px;
		overflow: hidden;
		border-bottom: ;
	
	}
	.good ul li img{
		float: left;
		width: 40%;
		height:80%;
		margin-top: 5%;
	
	}
	.good ul li div{
		float: left;
		width: 60%;
		height: 100%;
		padding: 7% 1%;
		border-bottom:solid 1px #EEEEEE ;
		
		
	}.good ul li p{
		line-height: 18px;
		width: 100%;
		word-wrap: break-word;
		margin: 2px 0;
	}
	.good ul li div p:nth-child(1){
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.good ul li div p:nth-child(2){
		height: 30%;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 13px;
		color: #777;
	}
	
	.good ul li div p:nth-child(3) span{
		padding: 0px 2px;
		border: solid 1px goldenrod;
		border-radius: 12%;
		margin-right: 5px;
		font-size: 11px;
		color: goldenrod;
	}
	.good ul li div p:nth-child(4){
		color: red;
		font-size: 18px;
	}
	.good ul li div p:nth-child(4) span:first-child{
		font-size: 10px;
		
	}
	.good ul li div p:nth-child(4) span:last-child{
		font-size: 12px;
		color: #888;
		margin-left: 5px;
	}
	.good ul li div p:nth-child(5) a{
		display: block;
		width: 100%;
		color: #888;
		font-size: 13px;
	}
	.good ul li div p:nth-child(5) a span{
		color: #666;
		margin-left: 2%;
	}
	.good ul li div p:nth-child(5) a i{
		font-weight: 400;
		font-size: 10px;
		position: relative;
		top: -1px;
	}
</style>